<template>
  <svg-icon :icon-class="'eye'" v-if="false"></svg-icon>
  <div>
    <div class="echart">
      <div style="display: flex;justify-content: center">
        <ECharts :options="chartOptions" />
        <ECharts :options="chartOptionsLine" />
        <ECharts :options="chartOptionsPie" />
        <ECharts :options="chartOptionsRose" v-if="false"/>
      </div>
    </div>
  </div>


</template>
<script lang="ts" setup>
	import {useUserStore} from '@/stores/user.ts'
  import {onMounted, ref} from 'vue'
	import { loginInfo } from '@/api/user';
	import ECharts from '@/components/echart/index.vue'
  const chartOptions = ref({
    title: {
      text: '柱状图'
    },
    tooltip: {},
    xAxis: {
      data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  });
  const chartOptionsLine = ref({
    title: {
      text: '折线图'
    },
    tooltip: {},
    xAxis: {
      data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'line',
      data: [5, 20, 36, 10, 10, 20]
    }]
  });
  const chartOptionsPie = ref({
    title: {
      text: '饼状图'
    },
    tooltip: {},
    xAxis: {
      data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'pie',
      data: [5, 20, 36, 10, 10, 20]
    }]
  });
  const chartOptionsRose = ref({
    title: {
      text: '花饼状图'
    },
    tooltip: {},
    xAxis: {
      data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'pie',
      // 内半径/外半径的大小
      radius: [10, 160],
      // 设置区域的位置
      center: ['50%', '50%'],
      bottom: '-15%',
      roseType: 'area', // 圆心角一样, 通过半径的不同表示大小
      itemStyle: {
        borderRadius: 8
      },
      data: [5, 20, 36, 10, 10, 20]
    }]
  });
  const userStore = useUserStore();
	onMounted(()=>{
		loginInfo().then((res)=>{
			if(res.code === 200){
				userStore.setUserInfo(res.data)
			}
		})
	})
</script>	
<style scoped>
  .echart{
    //display: flex;
    //justify-content: center;
    //align-items: center;
    width: 100%;
  }
</style>
